<template>
  <d2-container>
    <template slot="header">
      <el-form
        :gutter="24"
        ref="search-box"
        :model="mainQuery"
        label-width="auto"
        label-position="left"
        :inline="true"
      >
        <el-form-item label="商户号" size="mini">
          <el-input
            placeholder=""
            v-model="mainQuery.mchNo"
            @keyup.enter.native="handleSearch"
            clearable
          ></el-input>
        </el-form-item>

        

        <el-form-item label="账户类型" size="mini">
          <el-select
            v-model="mainQuery.accountType"
            placeholder="所有"
            clearable
          >
            <el-option
              v-for="item in accountTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="事件类型" size="mini">
          <el-select v-model="mainQuery.type" placeholder="所有" clearable>
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="事件步骤" size="mini">
          <el-select v-model="mainQuery.handleStatus" placeholder="所有" clearable>
            <el-option
              v-for="item in stepOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="状态" size="mini">
          <el-select v-model="mainQuery.status" placeholder="所有" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="时间区间：" size="mini">
          <el-date-picker
            size="mini"
            v-model="dateTimeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="datetimePickerOptions"
            @change="onDateTimePickerChange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-tooltip
              :disabled="!!mainTable.current"
              content="请选择一行数据"
            >
              <el-button
                class="filter-item"
                icon=""
                type=""
                @click="handleDetail"
                :disabled="mainTable.loading"
                size="mini"
                >查看详情</el-button
              >
            </el-tooltip>
            <el-button
              class="filter-item"
              icon=""
              :type="canCheck() ? 'success' : 'info'"
              @click="handleAction('check')"
              :disabled="!canCheck()"
              size="mini"
              v-if="
                $options.filters['checkButtonAccess'](
                  'eventOrder-actionCheck'
                )
              "
              >初审</el-button
            >
            <el-button
              class="filter-item"
              icon=""
              :type="canRecheck() ? 'success' : 'info'"
              @click="handleAction('recheck')"
              :disabled="!canRecheck()"
              size="mini"
              v-if="
                $options.filters['checkButtonAccess'](
                  'eventOrder-actionRecheck'
                )
              "
              >终审</el-button
            >
            <!-- <el-button class="filter-item" icon="" :type="canMoney() ? 'success' : 'info'" @click="handleAction('money')" :disabled="!canMoney()" size="mini" v-if="$options.filters['checkButtonAccess']('operatetrade-actionmoney')">出款</el-button> -->
            <!-- <el-button class="filter-item" icon="" :type="canUnfreeze() ? 'success' : 'info'" @click="handleAction('unfreeze')" :disabled="!canUnfreeze()" size="mini" v-if="$options.filters['checkButtonAccess']('operatetrade-actionunfreeze')">解冻</el-button> -->
            <el-button
              class="filter-item"
              icon="el-icon-download"
              size="mini"
              @click="handleExportExcel"
              >导出</el-button
            >
          </el-button-group>
        </div>
        <div class="right">
          <el-button
            class="filter-item"
            icon="el-icon-refresh"
            type="default"
            @click="resetMainData"
            :loading="mainTable.loading"
            size="mini"
            >重置</el-button
          >
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            @click="handleSearch"
            :loading="mainTable.loading"
            size="mini"
            >查询</el-button
          >
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @selection-change=""
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <dialog-action
      ref="dialog-action"
      @dialog-close="fetchMainData"
    ></dialog-action>

    <dialog-detail
      ref="dialog-detail"
      @dialog-close="fetchMainData"
    ></dialog-detail>

    <common-export ref="common-export"></common-export>
  </d2-container>
</template>

<script>

import util from '@/libs/util';
import DialogAction from './dialog-action';
import DialogDetail from './dialog-detail';
import CommonExport from '../../common/export';
import ApiMain from '@/api/settle.operatetrade';
import DatetimePickerMixin from '@/mixin/DatetimePickerMixin'


export default {
  name: 'settle-operatetrade',
  mixins: [
    DatetimePickerMixin,
  ],
  components: {
    'dialog-detail': DialogDetail,
    'dialog-action': DialogAction,
    'common-export': CommonExport,
  },
  data() {
    return {

      typeOptions: [],
      stepOptions: [],
      accountTypeOptions: [],
      statusOptions: [],

      mainQueryRaw: null,
      mainQuery: {
        mchNo: '',
        accountType: '',
        type: '',
        handleStatus: '',
        status: '',
        createTimeRange: [],
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true, minWidth: 200 },
          { title: '账户类型', key: 'strAccountType', align: 'center', showOverflowTooltip: true, minWidth: 200 },
          { title: '结算币种', key: 'currency', align: 'left', showOverflowTooltip: true },
          { title: '事件订单号', key: 'eventOrderNo', align: 'center', showOverflowTooltip: true, minWidth: 200 },

          {
            title: '事件变动金额', key: 'floatAmount', align: 'right', showOverflowTooltip: true, minWidth: 120, formatter(row, col, value, index) {
              return value.toFixed(2);
            }
          },
          { title: '事件类型', key: 'strType', align: 'center', showOverflowTooltip: true },
          { title: '事件步骤', key: 'strStep', align: 'center', showOverflowTooltip: true },

          {
            title: '申请', align: 'center', children: [
              { title: '申请备注', key: 'createRemark', align: 'center', showOverflowTooltip: true, minWidth: 200 },
              { title: '申请时间', key: 'createTime', align: 'center', showOverflowTooltip: true, minWidth: 160 },
              { title: '申请人', key: 'createBy', align: 'center', showOverflowTooltip: true, minWidth: 120 },
            ]
          },
          {
            title: '初审', align: 'center', children: [
              { title: '初审意见', key: 'reviewRemark', align: 'center', showOverflowTooltip: true, minWidth: 200 },
              { title: '初审时间', key: 'reviewTime', align: 'center', showOverflowTooltip: true, minWidth: 160 },
              { title: '初审人', key: 'reviewBy', align: 'center', showOverflowTooltip: true, minWidth: 120 },
            ]
          },
          {
            title: '复核', align: 'center', children: [
              { title: '复核意见', key: 'reReviewRemark', align: 'center', showOverflowTooltip: true, minWidth: 200 },
              { title: '复核时间', key: 'reReviewTime', align: 'center', showOverflowTooltip: true, minWidth: 160 },
              { title: '复核人', key: 'reReviewBy', align: 'center', showOverflowTooltip: true, minWidth: 120 },
            ]
          },
          // {title: '出款', align: 'center', children: [
          //   {title: '出款说明', key: 'moneyRemark', align: 'center', showOverflowTooltip: true, minWidth: 200},
          //   {title: '出款时间', key: 'moneyTime', align: 'center', showOverflowTooltip: true, minWidth: 160},
          //   {title: '出款人', key: 'moneyBy', align: 'center', showOverflowTooltip: true, minWidth: 120},
          // ]},
          // { title: '系统处理状态', key: 'strStatus', align: 'center', minWidth: 120, showOverflowTooltip: true },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

      dateTimeRange: []
    }
  },
  mounted() {

    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions()
      .finally(() => {
        this.resetMainData();
      });

  },

  methods: {

    canCheck() {
      if (this.mainTable.loading) return false;

      if (!this.mainTable.current) return false;
      return this.mainTable.current.handleStatus == 0 || this.mainTable.current.handleStatus == 2 || this.mainTable.current.handleStatus == 4
    },

    canRecheck() {
      if (this.mainTable.loading) return false;
      if (!this.mainTable.current) return false;
      return this.mainTable.current.handleStatus == 1
    },

    canMoney() {
      if (this.mainTable.loading) return false;
      if (!this.mainTable.current) return false;
      return this.mainTable.current.canMoney;
    },

    canUnfreeze() {
      if (this.mainTable.loading) return false;
      if (!this.mainTable.current) return false;
      return this.mainTable.current.canUnfreeze;
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },

    renderMainData(re) {

      re.list.forEach(item => {
        item.floatAmount = item.amount / 100;

        item.strAccountType = util.tool.strFromOptions(item.accountType, this.accountTypeOptions, '-');
        item.strType = util.tool.strFromOptions(item.type, this.typeOptions, '-');
        item.strStep = util.tool.strFromOptions(item.handleStatus, this.stepOptions, '-');
        item.strStatus = util.tool.strFromOptions(item.status, this.statusOptions, '-');

      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    onDateTimePickerChange() {
      this.mainQuery.createTimeRange = this.dateTimeRange

      this.fetchMainData();
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions() {

      var re = await ApiMain.getTypeOptions();
      this.typeOptions = re;

      var re = await ApiMain.getStepOptions();
      this.stepOptions = re;

      // var re = await ApiMain.getStatusOptions();
      // this.statusOptions = re;

      var re = await ApiMain.getAccountTypeOptions();
      this.accountTypeOptions = re;

    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {

      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleDetail();
    },

    handleAction(action) {
      if (!!this.mainTable.current) {
        this.$refs['dialog-action'].show(Object.copy(this.mainTable.current), action);
      }
    },
    handleDetail() {
      if (!!this.mainTable.current) {
        this.$refs['dialog-detail'].show(Object.copy(this.mainTable.current));
      }
    },

    handleExportExcel() {
      this.$refs['common-export'].handleExportExcel(ApiMain, this.mainQuery);
    },
  }
}
</script>

<style>
</style>
